<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台登录</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
    <script src="/static/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/login.css">
    <script type="text/javascript">

        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) { // enter 键
                $(".btnlogin").trigger("click");
            }
        };
        $.get("/employee/logout");
        function changeVarCode() {
            $("#varCode").attr("src", $("#varCode").attr("dsrc") + "&r=" + Math.random());
        }
        var i = 0;
        $(function () {

            changeVarCode();
            //更换验证码
            $("#varCode").click(function () {
                changeVarCode();
            })

            //登录
            $(".btnlogin").click(function () {
                var loginName = $("input[name=loginName]").val();
                var password = $("input[name=password]").val();
                var varCode = $("input[name=varCode]").val();

                if (loginName.length < 1 || password.length < 1) {
                    $(".errorText").show().text("请输入用户名和密码");
                    return;
                }

                var pattern = /\w{6,20}/;
                if (!pattern.test(loginName)) {
                    $(".errorText").show().text("请输入6-20位英文，数字");
                    return;
                }
                if (!pattern.test(password)) {
                    $(".errorText").show().text("请输入6-20位英文，数字");
                    return;
                }


                $.post("/employee/login", {
                    loginName: loginName,
                    password: password,
                    varCode: varCode
                }, function (data) {
                    if (data.state == "SUCCESS") {
                        window.location = "/";
                    } else {
                        changeVarCode();
                        i++;
                        if (i > 2) {
                            $(".check").show();
                        }
                        $(".errorText").show().text(data.message);
                    }
                }, "JSON");
            });
        })

    </script>
</head>

<body>
<div class="main">
    <div class="loginmain">
        <div class="logincenter">
            <div class="header">
                <em></em>
                <span>后台管理系统登录</span>
            </div>
            <!-- style="visibility:" -->
            <div class="errorText" style="display: none">请输入正确验证码</div>
            <input type="text" name="loginName" placeholder="请输入用户账号" value="admin123">
            <input type="password" name="password" placeholder="请输入用户密码" value="admin123">
            <div class="check error" style="display: none">
                <input type="text" name="varCode" placeholder="请输入验证码">
                <img id="varCode" dsrc="/var/imgCode?key=loginVar&length=1">
            </div>
            <button class="btnlogin">登录</button>

        </div>
    </div>
</div>
</body>
</html>